<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--两种方式
<input type="text" id="input1">
<input type="text" id="input2">

<input type="button" value="加" id="jia" onclick="jia()">
<input type="button" value="减" id="jian" onclick="jian()">
<input type="button" value="乘" id="cheng" onclick="cheng()">
<input type="button" value="除" id="chu" onclick="chu()"><br>
<div>结果为<span></span></div>

<script>
    let input1 = document.querySelector("#input1");
    let input2 = document.querySelector("#input2");
    let span = document.querySelector("span");

    if(isNaN(input1.value)||isNaN(input2.value)){
        span.innerText ="输入的非数字没有结果";
        return;
    }
    function jia(){
        span.innerText = input1.value*1+input2.value*1;
    }
    function jian(){
        span.innerText = input1.value*1-input2.value*1;
    }
    function cheng(){
        span.innerText = input1.value*input2.value;
    }
    function chu(){
        span.innerText = input1.value/input2.value;
    }
</script>

-->



<input type="text" id="input1">
<input type="text" id="input2">

<input type="button" value="加" id="jia" onclick="fun(1)">
<input type="button" value="减" id="jian" onclick="fun(2)">
<input type="button" value="乘" id="cheng" onclick="fun(3)">
<input type="button" value="除" id="chu" onclick="fun(4)"><br>
<div>结果为<span></span></div>
<script>
    function fun(x){
    let input1 = document.querySelector("#input1");
    let input2 = document.querySelector("#input2");
    let span = document.querySelector("span");
    switch (x) {
        case 1 :
            span.innerText = input1.value*1+input2.value*1;
            break;
        case 2 :
            span.innerText = input1.value*1-input2.value*1;
            break;
        case 3 :
            span.innerText = input1.value*input2.value;
            break;
        case 4 :
            span.innerText = input1.value/input2.value;
            break;
    }

    }
</script>
</body>
</html>